<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=
  , initial-scale=1.0"
    />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>

    <script
      src="https://unpkg.com/react@17/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </body>
  <script type="text/babel">
    /*
    生命周期的三个阶段(旧)：
    1.初始化阶段：由ReactDOM.render()触发---初次渲染
      1.1 constructor()
      1.2 componentWillMount()
      1.3 render()
      1.4 componentDidMount()   常用，一般在这个钩子中做初始化的事，例如：开启定时器、发送网络请求、订阅消息
    2.更新阶段：由组件内部this.setState（）或父组件重新render触发
      2.1 shouldComponentUpdate()
      2.2 componentWillUpdate()
      2.3 render()  必须用
      2.4 componentDidUpdate()
    3.卸载组件：由ReactDOM.unmountComponentAtNode()触发
      3.1 componentWillUnmount()   常用，一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
    */
    class Count extends React.Component {
      //构造器
      constructor(props) {
        //初始化状态
        super(props);
        this.state = { count: 0 };
        // console.log("Count-constructor");
      }
      //组件将要挂载的钩子
      componentWillMount() {
        console.log("componentWillMount");
      }
      //组件挂载完毕的钩子
      componentDidMount() {
        console.log("componentDidMount");
      }
      add = () => {
        //获取原状态
        const { count } = this.state;
        //更新状态
        this.setState({ count: count + 1 });
      };
      force = () => {
        this.forceUpdate();
      };

      //卸载组件按钮的回调
      unMountCom = () => {
        ReactDOM.unmountComponentAtNode("test");
      };
      //组件将要卸载的钩子
      componentWillUnmount() {
        console.log("componentWillUnmount");
      }
      //组件是否应该更新的阀门
      shouldComponentUpdate() {
        console.log("shouldComponentUpdate");
        return true;
      }
      //组件将要更新
      componentWillUpdate() {
        console.log("componentWillUpdate");
      }
      //组件更新完毕的钩子
      componentDidUpdate() {
        console.log("componentDidUpdate");
      }
      render() {
        console.log("count-render");
        const { count } = this.state;
        return (
          <div>
            <h2>当前求和为{count}</h2>
            <button onClick={this.add}>点我加一</button>
            <button onClick={this.unMountCom}>卸载组件</button>
            <button onClick={this.force}>强制跟新按钮</button>
          </div>
        );
      }
      //渲染组件
    }
    //父组件A
    class A extends React.Component {
      //初始化状态
      state = { carName: "奔驰" };
      changeCar = () => {
        this.setState({ carName: "奥迪" });
      };
      render() {
        return (
          <div>
            <div>我是A组件</div>
            <button onClick={this.changeCar}>换车</button>
            <B carName={this.state.carName} />
          </div>
        );
      }
    }
    //子组件B
    class B extends React.Component {
      componentDidMount() {
        console.log("componentDidMount");
      }
      //组件将要接收新的props的钩子
      componentWillReceiveProps(props) {
        console.log("componentWillReceiveProps", props);
      }
      shouldComponentUpdate() {
        return true;
      }
      //组件将要更新
      componentWillUpdate() {
        console.log("componentWillUpdate");
      }
      //组件更新完毕的钩子
      componentDidUpdate() {
        console.log("componentDidUpdate");
      }
      render() {
        return <div>我是B组件，接收到的车是:{this.props.carName}</div>;
      }
    }
    ReactDOM.render(<A />, document.getElementById("test"));
  </script>
</html>
